<script lang="ts" setup>
import type { VbenFormProps, VxeGridListeners, VxeGridProps } from '#/adapter';

import { ref } from 'vue';

import { useAccess } from '@vben/access';
import { Page } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';
import { useAccessStore, useUserStore } from '@vben/stores';

import { DownOutlined } from '@ant-design/icons-vue';
import { Button, message } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter';
import {
  list,
  remove,
  resetPassword,
  locked,
  playUser,
  unLocked,
} from '#/api/system/user';
import { TableAction } from '#/components/table-action';

import DetailForm from './detail.vue';
import UserForm from './form.vue';
import GrantRole from './grant-role.vue';
import { gridSchemas, searchFormSchemas } from './schemas';

const { hasAccessByCodes } = useAccess();
const userStore = useUserStore();

const accessStore = useAccessStore();
const hasTopTableDropDownActions = ref(false);
const userFormRef = ref();
const detailFormRef = ref();
const grantRoleRef = ref();
const formOptions: VbenFormProps = {
  ...searchFormSchemas,
  collapsed: true,
};

const gridOptions: VxeGridProps<any> = {
  ...gridSchemas,
  toolbarConfig: {
    ...gridSchemas.toolbarConfig,
    slots: {
      buttons: 'toolbar-buttons',
    },
    custom: {
      // 自定义列-图标
      icon: 'vxe-icon-menu',
    },
  },
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        return await list({
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        });
      },
    },
  },
};


const gridEvents: VxeGridListeners<any> = {
  checkboxChange() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
  checkboxAll() {
    // eslint-disable-next-line no-use-before-define
    const records = gridApi.grid.getCheckboxRecords();
    hasTopTableDropDownActions.value = records.length > 0;
  },
};
const [Grid, gridApi] = useVbenVxeGrid({
  formOptions,
  gridOptions,
  gridEvents,
});

// 打开新增表单
const handleAdd = () => {
  userFormRef.value.setData({
    isUpdate: false,
    gridApi,
  });
  userFormRef.value.open();
};
// 打开编辑表单
const handleEdit = (record: any) => {
  userFormRef.value.setData({
    record,
    isUpdate: true,
    gridApi,
  });
  userFormRef.value.open();
};
// 打开详情
const handleDetail = (record: any) => {
  detailFormRef.value.setData({
    record,
  });
  detailFormRef.value.open();
};
// 打开授权角色
const handleGrantRole = (record: any) => {
  grantRoleRef.value.setData({
    record,
    gridApi,
  });
  grantRoleRef.value.open();
};

// 重置密码
const handleResetPassword = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row.id);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  resetPassword({ ids }).then(() => {
    message.success('重置密码成功');
    gridApi.reload();
  });
};
// 扮演用户
const handlePlayUser = (row: any) => {
  playUser({
    userId: row.id,
  }).then((data) => {
    accessStore.setAccessToken(data.token);
    accessStore.setRefreshToken(data.refreshToken);
    message.success('用户扮演成功！');
    const { closeCurrentTab } = useTabs();
    closeCurrentTab();
    setTimeout(() => {
      location.reload();
    }, 600);
  });
};
// 锁定用户
const handleLocked = (record: any) => {
  const data = [];
  if (record && record.id) {
    data.push(record.id);
  }
  locked({
    data,
  }).then(() => {
    message.success('锁定用户成功');
    gridApi.reload();
  });
};

// 取消锁定用户
const handleUnLocked = (record: any) => {
  const data = [];
  if (record && record.id) {
    data.push(record.id);
  }
  unLocked({
    data,
  }).then(() => {
    message.success('取消锁定用户成功');
    gridApi.reload();
  });
};

// 删除
const handleDelete = (row: any) => {
  let ids = [];
  if (row) {
    ids.push(row.id);
  } else {
    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
  }
  remove(0,{data:ids }).then(() => {
    message.success('删除成功');
    gridApi.reload();
  });
};
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-buttons>
        <TableAction
          :actions="[
            {
              label: '新增',
              type: 'primary',
              icon: 'ant-design:plus-outlined',
              auth: ['admin', 'system:user:save'],
              onClick: handleAdd.bind(null),
            },
          ]"
          :drop-down-actions="[
            {
              label: '重置密码',
              icon: 'ant-design:setting-outlined',
              ifShow: hasTopTableDropDownActions,
              auth: ['admin', 'system:user:reset_password'],
              popConfirm: {
                title: `是否重置该用户密码？`,
                confirm: handleResetPassword.bind(null),
              },
            },
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              ifShow: hasTopTableDropDownActions,
              auth: ['admin', 'system:user:remove'],
              popConfirm: {
                title: '确定删除吗？',
                confirm: handleDelete.bind(null, false),
              },
            },
          ]"
        >
          <template #more>
            <Button style="margin-left: 8px">
              批量操作
              <DownOutlined />
            </Button>
          </template>
        </TableAction>
      </template>
      <template #toolbar-tools></template>
      <template #ACTION="{ row }">
        <TableAction
          :actions="[
            {
              label: '详情',
              type: 'link',
              size: 'small',
              auth: ['admin', 'system:user:detail'],
              onClick: handleDetail.bind(null, row),
            },
            {
              label: '编辑',
              type: 'link',
              size: 'small',
              auth: ['admin', 'system:user:update'],
              onClick: handleEdit.bind(null, row),
            },
          ]"
          :drop-down-actions="[
            {
              label: '扮演用户',
              icon: 'ant-design:play-square-outlined',
              auth: ['admin', 'system:play_user'],
              ifShow:false,
              popConfirm: {
                title: `是否扮演该用户？`,
                confirm: handlePlayUser.bind(null, row),
              },
            },
            {
              label: '重置密码',
              icon: 'ant-design:setting-outlined',
              auth: ['admin', 'system:user:reset_password'],
              popConfirm: {
                title: `是否重置该用户密码？`,
                confirm: handleResetPassword.bind(null, row),
              },
            },
            {
              label: '授权角色',
              icon: 'ant-design:usergroup-add-outlined',
              auth: ['admin', 'system:user:grant_role'],
              onClick: handleGrantRole.bind(null, row),
            },
            {
              label: '冻结用户',
              icon: 'ant-design:lock-outlined',
              auth: ['admin', 'system:user:locked'],
              popConfirm: {
                title: `是否冻结该用户？`,
                confirm: handleLocked.bind(null, row),
              },
              ifShow() {
                return (
                  hasAccessByCodes(['admin', 'system:user:locked']) &&
                  row.is_locked === 0
                );
              },
              disabled: userStore.$state.userInfo?.id === row.id,
            },
            {
              label: '取消冻结',
              icon: 'ant-design:unlock-outlined',
              auth: ['admin', 'system:user:un_locked'],
              popConfirm: {
                title: `是否取消冻结该用户？`,
                confirm: handleUnLocked.bind(null, row),
              },
              ifShow() {
                return (
                  hasAccessByCodes(['admin', 'system:user:un_locked']) &&
                  row.is_locked === 1
                );
              },
              disabled: userStore.$state.userInfo?.id === row.id,
            },
            {
              label: '删除',
              icon: 'ant-design:delete-outlined',
              auth: ['admin', 'system:user:remove'],
              popConfirm: {
                title: '确定删除吗？',
                confirm: handleDelete.bind(null, row),
              },
            },
          ]"
        />
      </template>
    </Grid>
    <UserForm ref="userFormRef" />
    <DetailForm ref="detailFormRef" />
    <GrantRole ref="grantRoleRef" />
  </Page>
</template>
